<template>
	<view>
		<view class="topnav">
			<uni-nav-bar :fixed="false" title='历史' leftIcon="left" @clickLeft="clickLeft" :rightText="historyText" @clickRight="clickRight"></uni-nav-bar>
		</view>
		<view class="">
			<uni-list>
				<uni-list v-show="dataList">
					<!-- 自定义右侧内容 -->
					<uni-list-chat :title="item.title" v-for="(item,index) in dataList" :avatar="item.cover"
						:note="item.descs" badge-positon="left" :author="item.author" :fictionType="item.fictionType"
						:clickable="isClickToPage" @click="goPage(item)" :isClickPageShow="isClickToPage" :fiction="item" @coordChange="coordChange">
						<view class="chat-custom-right">
							<text class="chat-custom-text">{{item.updateTime?item.updateTime.substring(0,10):""}}</text>
							<!-- 需要使用 uni-icons 请自行引入 -->
							<!-- <uni-icons type="closeempty" color="#ff0000" size="22" @click="remove(index)"></uni-icons> -->
						</view>
					</uni-list-chat>
				</uni-list>
				<view v-show="!dataList">
					<text>暂无历史阅读</text>
				</view>
			</uni-list>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [],
				historyType:"",
				isClickToPage:true,
				historyText:"管理",
				fictionArr:[],
				oldActiveFiction:undefined
			}
		},
		onLoad(option) {
			this.historyType = option.historyType
			this.getHistory(this.historyType)
		},
		methods: {
			coordChange(fiction){
				if(fiction){
					this.oldActiveFiction = fiction
					for(let i =0;i<this.fictionArr.length;i++){
						if(JSON.stringify(this.fictionArr[i]) == JSON.stringify(fiction) ){
							return false
						}
					}
					this.fictionArr.push(fiction)
				}else{
					let oldFiction = this.oldActiveFiction
					for(let i =0;i<this.fictionArr.length;i++){
						if(JSON.stringify(this.fictionArr[i]) == JSON.stringify(oldFiction) ){
							this.fictionArr.splice(i,1)
						}
					}
				}
			},
			clickRight(){
				this.isClickToPage = !this.isClickToPage
				this.historyText = this.isClickToPage?"管理":"删除"
				let historyType =this.historyType
				if(this.isClickToPage){
					for(let i =0;i<this.fictionArr.length;i++){
						for(let n =0;n<this.dataList.length;n++){
							if(historyType =="book" && this.fictionArr[i].fictionId == this.dataList[n].fictionId ){
							// if(JSON.stringify(this.fictionArr[i]) == JSON.stringify(this.dataList[n]) ){
								this.dataList.splice(n,1)
								break
							}else if(historyType =="cartoon" && this.fictionArr[i].comicId == this.dataList[n].comicId ){
							// if(JSON.stringify(this.fictionArr[i]) == JSON.stringify(this.dataList[n]) ){
								this.dataList.splice(n,1)
								break
							}else if(historyType =="video" && this.fictionArr[i].videoId == this.dataList[n].videoId ){
							// if(JSON.stringify(this.fictionArr[i]) == JSON.stringify(this.dataList[n]) ){
								this.dataList.splice(n,1)
								break
							}
						}
					}
					uni.setStorage({
						key:this.historyType,
						data:this.dataList
					})
					this.fictionArr=[]
				}
				console.log(this.dataList)
			},
			getHistory(historyType) {
				this.dataList = uni.getStorageSync(historyType)
			},
			goPage(item){
				uni.navigateTo({
					url:`/pages/index/${this.historyType}/chapter/chapter?item=${JSON.stringify(item)}`
				})
			},
			clickLeft(){
				uni.navigateBack()
			},
		}
	}
</script>

<style lang="scss" scoped>
	image {
		will-change: transform
	}

	.chat-custom-right {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}

	.chat-custom-text {
		font-size: 12px;
		color: #999;
	}

	.image {
		width: 25px;
		height: 25px;
	}

	.text {
		font-size: 14px;
		margin-top: 5px;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		// display: block;
		/* #endif */
	}

	.grid-dynamic-box {
		margin-bottom: 15px;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-item-box-row {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-dot {
		position: absolute;
		top: 5px;
		right: 15px;
	}

	.swiper {
		height: 420px;
	}

	/* #ifdef H5 */
	@media screen and (min-width: 768px) and (max-width: 1425px) {
		.swiper {
			height: 630px;
		}
	}

	@media screen and (min-width: 1425px) {
		.swiper {
			height: 830px;
		}
	}

	/* #endif */
</style>
